<template>
  <div>
    <t-card class="list-card-container" :bordered="false">
      <t-table
        :data="data"
        :columns="COLUMNS"
        vertical-align="top"
        :hover="true"
        :pagination="pagination"
        :loading="dataLoading"
        :header-affixed-top="headerAffixedTop"
        @page-change="rehandlePageChange"
        @change="rehandleChange"
      >
        <template #status="{ row }">
          <t-tag v-if="row.status === 0" theme="danger" variant="light"> 待付款 </t-tag>
          <t-tag v-if="row.status === 1" theme="warning" variant="light"> 已付款 </t-tag>
          <t-tag v-if="row.status === 2" theme="warning" variant="light"> 已退款 </t-tag>
          <t-tag v-if="row.status === 3" theme="success" variant="light"> 已完成 </t-tag>
        </template>
        <template #isVIP="{ row }">
          <t-tag v-if="row.isVIP === true" theme="success" variant="light"> {{ $t('pages.listBase.vip') }}</t-tag>
          <t-tag v-if="row.isVIP === false" theme="warning" variant="light"> {{ $t('pages.listBase.novip') }} </t-tag>
        </template>
      </t-table>
    </t-card>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ListBase',
};
</script>

<script setup lang="ts">
import axios from 'axios';
import { PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
import { computed, onMounted, ref } from 'vue';

import { prefix } from '@/config/global';
import { CONTRACT_STATUS } from '@/constants';
import { useSettingStore } from '@/store';

const store = useSettingStore();

const COLUMNS: PrimaryTableCol<TableRowData>[] = [
  { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
  {
    title: '订单编号',
    align: 'left',
    width: 200,
    colKey: 'id',
    fixed: 'left',
  },
  { title: '订单状态', colKey: 'status', width: 160 },
  {
    title: '订单商品',
    width: 160,
    ellipsis: true,
    colKey: 'goodName',
  },
  {
    title: '订单时间',
    width: 160,
    ellipsis: true,
    colKey: 'createdAt',
  },
  {
    title: '商品价格',
    width: 160,
    ellipsis: true,
    colKey: 'price',
  },
  {
    title: '下单用户',
    width: 160,
    ellipsis: true,
    colKey: 'userName',
  },
  {
    title: '下单手机号',
    ellipsis: true,
    width: 160,
    colKey: 'phone',
  },
  {
    title: '是否会员',
    ellipsis: true,
    width: 160,
    colKey: 'isVIP',
  },
];

const data = ref([]);
const pagination = ref({
  defaultPageSize: 20,
  total: 100,
  defaultCurrent: 1,
});

const dataLoading = ref(false);
const fetchData = async () => {
  dataLoading.value = true;
  try {
    const response = await axios.get('/api/admin/get-total-report');
    data.value = response.data.data;
    console.info(response);
    pagination.value = {
      ...pagination.value,
      total: response.data.data.length,
    };
  } catch (e) {
    console.log(e);
  } finally {
    dataLoading.value = false;
  }
};

onMounted(() => {
  fetchData();
});

// const selectedRowKeys = ref([1, 2]);
// const rowKey = 'index';
//
// const rehandleSelectChange = (val: number[]) => {
//   selectedRowKeys.value = val;
// };
const rehandlePageChange = (curr: unknown, pageInfo: unknown) => {
  console.log('分页变化', curr, pageInfo);
};
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
  console.log('统一Change', changeParams, triggerAndData);
};

const headerAffixedTop = computed(
  () =>
    ({
      offsetTop: store.isUseTabsRouter ? 48 : 0,
      container: `.${prefix}-layout`,
    }) as any,
);
</script>

<style lang="less" scoped>
.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: var(--td-comp-margin-s);
  }
}

.list-card-container {
  margin-top: 20px;
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);

  :deep(.t-card__body) {
    padding: 0;
  }
}

.left-operation-container {
  display: flex;
  align-items: center;
  margin-bottom: var(--td-comp-margin-xxl);

  .selected-count {
    display: inline-block;
    margin-left: var(--td-comp-margin-l);
    color: var(--td-text-color-secondary);
  }
}

.search-input {
  width: 360px;
}
</style>
